<template>
  <div class="password-config">
    <Form
      :model="formState"
      style="width: 1010px"
      :label-col="{ style: { width: '210px' } }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      label-align="right"
      :colon="false"
    >
      <FormItem name="JE_SYS_PASSWORD" class="JE_SYS_PASSWORD" :label="$t('password.password')">
        <Input v-model:value="formState.JE_SYS_PASSWORD" class="myInput" />
        <div class="text">
          <i>{{ $t('password.passwordTip') }}</i>
        </div>
      </FormItem>
      <FormItem name="INITPASSWORD" class="INITPASSWORD" :label="$t('password.changePassword')">
        <Select
          v-model:value="formState.INITPASSWORD"
          :allow-clear="false"
          :options="selectPassword"
          class="myInput"
          @change="($event) => handleChange('INITPASSWORD', $event)"
        >
        </Select>
        <div class="text">
          <i>{{ $t('password.changePasswordTip') }}</i>
        </div>
      </FormItem>
      <FormItem name="JE_CORE_ERRORPW" class="JE_CORE_ERRORPW" :label="$t('password.times')">
        <InputNumber v-model:value="formState.JE_CORE_ERRORPW" min="0" class="myInput" />
        <div class="text">
          <i>{{ $t('password.timesTip') }}</i>
        </div>
      </FormItem>
      <div class="party">
        <FormItem name="REGEXP" class="REGEXP" :label="$t('password.strategy')">
          <InputNumber
            v-model:value="formState.REGEXP_NUMBER"
            min="6"
            max="32"
            class="myInput"
            style="width: 60px"
          />
          <span style="margin-left: 15px">{{ $t('password.text') }}</span>
          <div class="text">
            <i>{{ $t('password.strategyTip') }}</i>
          </div>
        </FormItem>
        <FormItem name="exp" class="form-exp">
          <Select
            v-model="formState.REGEXP"
            :allow-clear="false"
            :default-value="formState.REGEXP"
            :options="expList"
            style="width: 575px"
            @change="($event) => handleChange('REGEXP', $event)"
          />
        </FormItem>
      </div>

      <FormItem name="JE_REGEXP_ENABLE" class="JE_REGEXP_ENABLE" :label="$t('password.isOpen')">
        <radio-group
          v-model:value="formState.JE_REGEXP_ENABLE"
          :options="selectList"
          class="my-checkbox"
        />
        <div class="text">
          <i>{{ $t('password.isOpenTip') }}</i>
        </div>
      </FormItem>
    </Form>
  </div>
</template>

<script>
  import { defineComponent, onUnmounted, reactive, ref } from 'vue';
  import { Input, Form, InputNumber, Select, Modal, Radio } from '@jecloud/ui';
  import VueEvent from '@/helper/model/event';
  import { useOpenDialog } from '@/hooks';
  import { saveConfigData } from '@/api';
  import { onScroll } from '@/utils/utils';
  import { useI18n } from '@common/locales';

  export default defineComponent({
    name: 'PasswordConfig',
    components: {
      Form,
      FormItem: Form.Item,
      Input,
      RadioGroup: Radio.Group,
      InputNumber,
      Select,
    },
    props: {
      dataAll: {
        type: Array,
        default: () => [],
      },
    },
    setup(props) {
      // 表单信息
      const formState = reactive({
        JE_SYS_PASSWORD: '123456',
        INITPASSWORD: '',
        JE_CORE_ERRORPW: '5',
        JE_REGEXP_ENABLE: '1',
        REGEXP_NUMBER: '6',
        REGEXP: 'simple',
      });
      let meta = {};
      let res = {};
      // 装换数据成formState类型
      const changeDataType = (parame) => {
        res = parame.filter((item) => {
          return item.code === 'password-config';
        });
        res[0]?.items.find((item) => {
          formState[item.code] = item['value'];
        });
        meta = JSON.parse(JSON.stringify(formState));
      };
      changeDataType(props.dataAll);
      // 数据是否改变
      const isChange = () => {
        return Object.keys(meta).every((item) => {
          return meta[item] === formState[item];
        });
      };
      const changeBar = () => {
        VueEvent.emit('saveResult', isChange());
      };
      // 是否显示二级页面
      const showSecondary = ref(false);
      // 是否保存的回调
      const isSaveCallback = () => {
        if (isChange()) return changeBar();
        useOpenDialog({
          attribute: 'password-config',
          allFields: JSON.stringify(formState),
        });
      };
      // 单选
      const I18n = useI18n().messages.zh_CN;
      const selectList = reactive([
        { value: '1', label: I18n.yes },
        {
          value: '0',
          label: I18n.no,
        },
      ]);
      // 密码
      const selectPassword = reactive([
        { value: '1', label: I18n.yes },
        {
          value: '0',
          label: I18n.no,
        },
      ]);
      // 安全规则
      const expList = reactive([
        { value: 'simple', label: I18n.password.easy },
        { value: 'common', label: I18n.password.common },
        { value: 'complex', label: I18n.password.difficult },
      ]);
      const handleChange = (code, e) => {
        formState[code] = e;
      };

      // 保存的回调事件
      const clickCallback = () => {
        if (!isChange()) {
          saveConfigData({
            attribute: 'password-config',
            allFields: JSON.stringify(formState),
            type: '',
          }).then(
            (meta = JSON.parse(JSON.stringify(formState))),
            Modal.notice('保存成功', 'success'),
            VueEvent.emit('changeAllData', { item: 'password-config', formState }),
          );
        } else {
          // 如果显示了子页面就不提示
          Modal.notice('无数据操作!', 'info');
        }
      };
      VueEvent.on('toolbarSaveEventS', clickCallback);
      VueEvent.on('isSave', isSaveCallback);
      VueEvent.on('fadeScroll', onScroll);
      onUnmounted(() => {
        VueEvent.off('toolbarSaveEventS', clickCallback);
        VueEvent.off('isSave', isSaveCallback);
        VueEvent.off('fadeScroll', onScroll);
      });

      return {
        showSecondary,
        formState,
        selectList,
        selectPassword,
        expList,
        handleChange,
      };
    },
  });
</script>

<style lang="less" scoped>
  .password-config {
    padding-top: 30px;
    .party {
      position: relative;
    }
    .form-exp {
      position: absolute;
      left: 335px;
      top: 0;
    }
  }
</style>
